<template>
	<view class="message">
		<view class="search">
			<uni-nav-bar backgroundColor="#546eff" border="true" shadow="true" statusBar="true" fixed="true">
			    <view class="input-btn" :style="{'height':inputHeight+'px'}" @click="inputBtn">
					<input :style="{'height':inputHeight+'px','lineHeight':inputHeight+'px'}" type="text" value="请输入内容" disabled/>
				</view>
			</uni-nav-bar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputHeight:''
			}
		},
		methods: {
			//点击搜索框跳转
			inputBtn(){
				console.log("点击跳转");
			},
			//获取胶囊的位置
			getMenuButtonInfo(){
				const MenuButtonInfo=uni.getMenuButtonBoundingClientRect()
				this.inputHeight=MenuButtonInfo.height;
			}
		},
		created() {
			this.getMenuButtonInfo();
		}
	}
</script>

<style scoped lang="scss">
.input-btn{
	background-color: #fff;
	border-radius: 20px;
	background-color: #fff;
	color: #546eff;
	width: 440rpx;
	margin-left: -100rpx;
	padding-left: 20rpx;
	>input{
		width: 100%;
		border-radius: inherit;
		overflow: hidden;
	}
}

</style>
